<script setup lang="ts">
import { useField } from 'vee-validate'

interface Option {
  label: string
  value: string | number
}

interface Props {
  name: string
  options: Option[]
  placeholder?: string,
  label?: string,
  required?: boolean
  title: string
  valueKey?: string
  modelValue?: any // 默认值
  labelKey?: string
}

const props = defineProps<Props>()
const isOpen = ref(false)
const selectedItem = ref<Option>()

const { value, errorMessage, handleChange, setValue } = useField(() => props.name, undefined, {
    initialValue: props.modelValue ?? ''
})

const emits = defineEmits(['update:modelValue', 'change'])

watch(value, (val) => {
  emits('update:modelValue', val)
})

const selectedLabel = computed(() => {
  const match = props.options.find((opt: Option) => opt[(props.valueKey || 'value') as keyof Option] === value.value)
  return match ? match[(props.labelKey || 'label') as keyof Option] : ''
})

function onSelect(option: any) {
  setValue(option[props.valueKey || 'value'])
  selectedItem.value = option
  emits('change', option)
  isOpen.value = false
}
</script>

<template>
  <div class="relative">
    <div v-if="props.label" class="mb-[.375rem] text-text-white-2 font-[700] flex justify-between items-center">
      <div>
        <span>{{ props.label }}</span>
        <span v-if="props.required" class="text-function-red ml-[.3125rem]">*</span>
      </div>
      <slot name="label-right"/>
    </div>
    <div class="base-input bg-bg-black-1 pr-2" @click="isOpen = !isOpen">
      <slot name="left-icon" :item="selectedItem"/>
      <input class="min-w-0" readonly ref="inputRef" :value="selectedLabel" :placeholder="props.placeholder" />
      <div class="shrink-0 size-[20px] bg-bg-black-4 rounded-[4px] flex justify-center items-center">
        <BaseIcon name="uni-arrow-down" className="!text-text-white-0"/>
      </div>
    </div>
    <BaseSheet
        v-model="isOpen"
        :title="title"
        :items="props.options"
      >
        <template #sheet-header>
            <slot name="sheet-header" />
        </template>
        <template #default="{ item }">
            <div @click="onSelect(item)">
                <slot name="sheet-content" :item="item" :value="value"/>
            </div>
        </template>
    </BaseSheet>
    <p v-if="errorMessage" class="text-function-red mt-1">{{ errorMessage }}</p>
  </div>
</template>

<style>
:root{
  --bc-input-focus-border-color: #24EE89;
  --bc-input-border-color: #3B4041;
}
</style>

<style scoped lang="scss">
.base-input {
  height: 2.5rem;
  display: flex;
  align-items: center;
  border-radius: 0.25rem;
  border: 1px solid var(--bc-input-border-color);
  padding-left: 0.75rem;
  padding-right: 0.5rem;
  gap: 0.5rem;
  transition: all 0.35s cubic-bezier(0.36, 0.66, 0.04, 1);
  color: #fff;
  background-color: #1E2121;

  &:focus-within {
    border-color: var(--bc-input-focus-border-color);
  }

  >input {
    font-size: .75rem;
    flex: 1;
    &::placeholder {
      color: #B3BEC1;
      font-size: 0.75rem;
    }
  }
}
</style>